<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				margin: 0 auto;
				width: 348px; 
				height:617px;
				background: url(img/6.jpg)  no-repeat;
				background-size:cover;
				position: relative;
			}
			#num{
				width: 348px;
				margin-top: 100px;
				height: 80px;
			}
			.clearfix{
				display: table;
				content: "";
				clear: both;
			}
			input:first-child{
				text-align: right;
				vertical-align: bottom;
				font-size: 56px;
				color: white;
			}
			input:nth-of-type(n+1){
				width: 87px;
				height: 87px;
				border: none;
				outline: none;
				float: left;
				background-color: rgba(0,0,0,0);
			}
			input:nth-of-type(18){
				width: 174px;
				height: 87px;
			}
		</style>
	</head>
	<body>
		<div class="box clearfix">
			<input type="text" id="num" value=""/><br />
			<input type="button" onclick="qingchu()"/>
			<input type="button" onclick="fuhao()"/>
			<input type="button" onclick="qiuyu()"/>
			<input type="button" onclick="chu()"/><br />
			<input type="button" onclick="seven()"/>
			<input type="button" onclick="eight()"/>
			<input type="button" onclick="nine()"/>
			<input type="button" onclick="cheng()"/><br />
			<input type="button" onclick="four()"/>
			<input type="button" onclick="five()"/>
			<input type="button" onclick="six()"/>
			<input type="button" onclick="jian()"/><br />
			<input type="button" onclick="one()"/>
			<input type="button" onclick="two()"/>
			<input type="button" onclick="three()"/>
			<input type="button" onclick="jia()"/><br />
			<input type="button" onclick="zero()">
			<input type="button" onclick="dian()">
			<input type="button" onclick="dengyu()">
		</div>
		<script>
			var qingchu=function(){
				num.value="";
			}
			var fuhao=function(){
				num.value=num.value*"-1";
			}
			var qiuyu=function(){
				num.value=num.value+"%";
			}
			var chu=function(){
				num.value=num.value+"÷";
			}
			var seven=function(){
				num.value=num.value+"7";
			}
			var eight=function(){
				num.value=num.value+"8";
			}
			var nine=function(){
				num.value=num.value+"9";
			}
			var cheng=function(){
				num.value=num.value+"*";
			}
			var four=function(){
				num.value=num.value+"4";
			}
			var five=function(){
				num.value=num.value+"5";
			}
			var six=function(){
				num.value=num.value+"6";
			}
			var jian=function(){
				num.value=num.value+"-";
			}
			var one=function(){
				num.value=num.value+"1";
			}
			var two=function(){
				num.value=num.value+"2";
			}
			var three=function(){
				num.value=num.value+"3";
			}
			var jia=function(){
				num.value=num.value+"+";
			}
			var zero=function(){
				num.value=num.value+"0";
			}
			var dian=function(){
				num.value=num.value+".";
			}
			var dengyu=function(){
				num.value=num.value+"=";
			}
		</script>
	</body>
<html>
